<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人简历</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

    <link rel="shortcut icon" href="./images/favicon.ico"/>

    <!--lib css-->
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="css/jquery.fullPage.css"/>
    <link rel="stylesheet" href="css/animate.css">

    <!--personal css-->
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-default resume">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand EngName" data-menuanchor="page1" href="#page1">Mr.Yang</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right" id="menu">
                <li data-menuanchor="page2" class="active">
                    <a href="#page2">基本资料</a>
                </li>
                <li data-menuanchor="page3">
                    <a href="#page3">专业技能</a>
                </li>
                <li data-menuanchor="page4">
                    <a href="#page4">工作经历</a>
                </li>
                <li data-menuanchor="page5">
                    <a href="#page5">项目经验</a>
                </li>
                <li data-menuanchor="page6">
                    <a href="#page6">自我评价</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="guns sky">
    <div class="clouds_one"></div>
    <div class="clouds_two"></div>
    <div class="clouds_three"></div>
</div>
<div class="pure">

</div>
<div id="resume">
    <div class="section item-1">
        <div class="row word">
            <span class="resume-hide">杨宇涛</span>
            <span class="hidden-xs resume-hide">个人简历</span>
            <span class="col-xs-12 hidden-sm hidden-md hidden-lg resume-hide">简历</span>

            <p class="motto resume-hide hinge-sty" style="position: relative">爱前端，爱生活</p>
            <a href="#" class="next-page ">
                <span class="glyphicon glyphicon-chevron-down"></span>
            </a>
        </div>

        <div class="corner1 corner">
            <img src="./images/page_home/1.png" alt=""/>
        </div>
        <div class="corner2 corner">
            <img src="./images/page_home/2.png" alt=""/>
        </div>
        <div class="corner3 corner">
            <img src="./images/page_home/3.png" alt=""/>
        </div>
        <div class="corner4 corner">
            <img src="./images/page_home/4.png" alt=""/>
        </div>

    </div>
    <div class="section item-2">
        <div class="container">
            <h1 class='hidden-xs hidden-sm page2-title'>基本资料</h1>
            <div class="row">
                <div class=" icon-infomation col-xs-6 col-sm-6 col-md-3">
                    <img src="./images/page-2/glass.png" alt="">
                    <h4>基本信息</h4>
                    <p>
                        姓名: 杨宇涛 男
                        <br>
                        年龄: 24岁 籍贯：河北
                    </p>
                </div>
                <div class=" icon-infomation col-xs-6 col-sm-6 col-md-3">
                    <img src="./images/page-2/hat.png" alt="">
                    <h4>毕业院校</h4>
                    <p>
                        石家庄铁道
                    </p>

                </div>
                <div class=" icon-infomation col-xs-6 col-sm-6 col-md-3">
                    <img src="./images/page-2/book.png" alt="">
                    <h4>学历和专业</h4>
                    <p>
                        本科  测绘
                        <br>
                        HTML5 CSS3 打游戏
                    </p>
                </div>
                <div class=" icon-infomation col-xs-6 col-sm-6 col-md-3">
                    <img src="./images/page-2/tel.png" alt="">
                    <h4>联系方式</h4>
                    <p>
                        邮箱 :410806672@qq.com
                        <br>
                        电话 :15831863974
                    </p>
                </div>
            </div>

        </div>
    </div>
    <div class="section item-3">
        <div class="container">
            <div class="img-3 hidden-xs">
                <img src="./images/page-3/5(2).png" alt="">
            </div>
            <div class="bg-img hidden-xs hidden-sm">
                <img src="./images/page-3/1(4).png" alt="">
            </div>
            <div class="sm-img fly hidden-xs hidden-sm">
                <img src="./images/page-3/2(3).png" alt="">
            </div>


            <div class="skill-introduce">
                <div class="media">
                    <div class="media-left media-top">
                        <a href="#" class=''>
                            <img class="media-object" src="./images/page-3/tv8.png" alt="">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">PC端</h4>
                        <p>
                            会使用 Html5 Css3 JavaScript，勉强完成web端或者移动端页面的编写和维护，<br>
                            思路清晰，结构完整，易于维护和持久化开发，能处理主流浏览器兼容问题。
                            熟悉使用原生js, 了解js面向对象原理，闭包以及原型结构，能够合理利用面向对象以及模块化开发,并且能适当完成框架封装。熟练使用 jQuery，并能完成相关项目。
                            <br>熟悉Bootstrap canvas等实用插件的应用,轮播图，tab栏，瀑布流，延迟加载等等常用功能的实现
                            <br>掌握 Ajax交互原理，根据后台接口能够合理完成前后台交互，数据的增删改查


                        </p>

                    </div>
                </div>
                <div class="media ">
                    <div class="media-left media-top">
                        <a href="#" class=''>
                            <img class="media-object" src="./images/page-3/apple6.png" alt="">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">手机端</h4>
                        <p>
                            掌握 移动端编程，会基于流式布局以及 响应式布局 开发基于移动端的页面。
                            <br>熟练使用Bootstrap 框架以及框架 ionic 的使用。
                        </p>

                    </div>
                </div>
                <div class="media ">
                    <div class="media-left media-top">
                        <a href="#" class=''>
                            <img class="media-object" src="./images/page-3/baterry10.png" alt="">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">其他</h4>
                        <p>了解 angularJS 框架原理，可以完成无需刷新的单页面应用
                            <br>了解Node.js,PHP 的工作原理和使用环境
                        </p>
                    </div>
                </div>
            </div>

            <div class="skills hidden-xs">
                <span class="subject-2">Bootstrap</span>
                <span class="subject-3">CANVAS</span>
                <span class="subject-4">jQuery</span>
                <span class="subject-10">Angular</span>
                <span class="subject-5">移动端</span>
                <span class="subject-6">CSS3</span>
                <span class="subject-7">响应式</span>
                <span class="subject-8">Nodejs</span>
                <span class="subject-1">HTML5</span>
            </div>
        </div>
    </div>
    <div class="section item-4" id='item-4'>
        <div class="container">
            <span class='title hidden-xs  hidden-sm' style='display: inline-block'>个人经历</span>
            <span class='sign col-xs-12 hidden-xs  hidden-sm' style='font-size: 20px'>热爱技术,专注用户体验</span>
            <div class="row">
                <div class="col-xs-6 col-md-6">
                    <div class="thumbnail">
                        <img src="./images/page-4/zhiyou.jpg" class=' img-circle team-img' alt="">
                        <div class="caption">
                            <h3></h3>
                            <p>爱好就是兴趣</p>
                            <p>主要学习html5,css3,javascript</p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6 col-md-4">
                    <div class="thumbnail">
                        <img src="./images/page-4/2.jpg" class='img-circle team-img' alt="">
                        <div class="caption">
                            <h3>东方通讯软件技术有限公司</h3>
                            <p>前端WEB页面的设计开发</p>
                            <p>使用JS，JQuery，AJAX</p>
                        </div>
                    </div>
                </div>
                <!--<div class="col-xs-6 col-md-4">-->
                    <!--<div class="thumbnail">-->
                        <!--<img src="./images/page-4/anjie.jpg" class='img-circle team-img' alt="">-->
                        <!--<div class="caption">-->
                            <!--<h3>小米商城</h3>-->
                            <!--<p>前端工程师</p>-->
                            <!--<p>移动端小米商城</p>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->

            </div>

        </div>
    </div>
    <div class="section item-5">
        <!--第一屏-->
        <div class="slide hidden-xs">
            <div class="container" id='container-img'>
                <div class="row">
                    <div class="portfolio-items">
                        <div class="col-sm-6 col-md-3 col-lg-3 web">
                            <div class="portfolio-item">
                                <div class="hover-bg">
                                    <div class="hover-text">
                                        <h4><a href='#' target='_blank' title="智能家居"></a>个人博客</h4>
                                        <small>技术：html+css+angularJS+PHP+canvas</small>
                                        <i class="fa fa-search"></i></div>
                                    <img src="images/page-4/2.jpg" class="img-responsive" alt="个人博客">
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-3 col-lg-3">
                            <div class="portfolio-item">
                                <div class="hover-bg">
                                    <div class="hover-text">
                                        <h4><a href="http://www.ourangel.cn/" target='_blank' title="安杰">安杰</a></h4>
                                        <small>技术：HTML+CSS+JQuery</small>
                                    </div>
                                    <img src="img/02.jpg" class="img-responsive" alt=""></div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-3 col-lg-3">
                            <div class="portfolio-item">
                                <div class="hover-bg">
                                    <div class="hover-text">
                                        <h4><a href="http://wealth.jrq.com" target='_blank' title="金融圈">金融圈</a></h4>
                                        <small>技术：Bootstrap+JQuery</small>
                                    </div>
                                    <img src="img/03.jpg" class="img-responsive" alt="金融圈"></div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-3 col-lg-3">
                            <div class="portfolio-item">
                                <div class="hover-bg">
                                    <div class="hover-text">
                                        <h4><a href='javascript:;' target='_blank' title=""></a>电商活动页面</h4>
                                        <small>技术：Bootstrap+JQuery</small>
                                    </div>
                                    <img src="img/04.jpg" class="img-responsive" alt=""></div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3 col-lg-3">
                            <div class="portfolio-item">
                                <div class="hover-bg">
                                    <div class="hover-text">
                                        <h4><a href='javascript:;' target='_blank' title=""></a>装饰用</h4>
                                        <small>技术：HTML+CSS+JQuery</small>
                                    </div>
                                    <img src="img/05.jpg" class="img-responsive" alt="装饰用">
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3 col-lg-3">
                            <div class="portfolio-item">
                                <div class="hover-bg">
                                    <div class="hover-text">
                                        <h4><a href="javascript:;" target='_blank' title="D"></a>装饰用</h4>
                                        <small>技术：Bootstrap+JQuery</small>
                                    </div>
                                    <img src="img/06.jpg" class="img-responsive" alt="装饰用"></div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3 col-lg-3">
                            <div class="portfolio-item">
                                <div class="hover-bg">
                                    <div class="hover-text">
                                        <h4><a href="javascript:;" target='_blank' title="华硕万家">华硕万家</a></h4>
                                        <small>技术：HTMl+CSS+JS</small>
                                    </div>
                                    <img src="img/09.png" class="img-responsive" alt="华硕万家"></div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3 col-lg-3">
                            <div class="portfolio-item">

                                <div class="hover-bg">
                                    <div class="hover-text">
                                        <h4><a href='javascript:;' target='_blank' title="软装大师">软装大师 </a></h4>
                                        <small>技术：Bootstrap+JQuery</small>
                                    </div>
                                    <img src="img/08.jpg" class="img-responsive" alt="软装大师">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--第二屏-->
        <div class="slide">
            <div class="rotator" style="display: none">
                <div id="rot1">
                    <img src="" width="800" height="300" class="bg" alt=""/>
                    <div class="heading">
                        <h1></h1>
                    </div>
                    <div class="description">
                        <p></p>
                    </div>
                </div>
                <ul id="rotmenu">
                    <li>
                        <a href="#">Flappy Bird</a>
                        <div style="display:none;">
                            <div class="info_image">1.jpg</div>
                            <div class="info_heading">Flappy Bird</div>
                            <div class="info_description">
                                通过面向对象封装方法，利用canvas绘制。
                                手机可以玩。
                                <br><a href="http://chenjichuan.cn/bird.html" target= _blank class="more">play</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="#">cart</a>
                        <div style="display:none;">
                            <div class="info_image">2.jpg</div>
                            <div class="info_image">Add to cart</div>
                            <div class="info_description">
                                电商的添加到购物车模型，符合大部分电商场景
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="#">Fall</a>
                        <div style="display:none;">
                            <div class="info_image">3.jpg</div>
                            <div class="info_description">
                               瀑布流布局，同时具备响应式，延迟加载等提高用户体验场景。
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="#">view</a>
                        <div style="display:none;">
                            <div class="info_image">4.jpg</div>
                            <div class="info_heading">view</div>
                            <div class="info_description">
                                有趣儿的小东西，添加大图后可以实现全景浏览
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="#">Full page</a>
                        <div style="display:none;">
                            <div class="info_image">5.jpg</div>
                            <div class="info_description">
                                主流的商家活动推广页面应用场景，全屏浏览同时，分页分屏展示。
                            </div>
                        </div>
                    </li>
                </ul>


            </div>
        </div>
    </div>
    <div class="section item-6">
        <h1>Focus Me</h1>
        <div class="word">
        <p>
            有责任，工作踏实，性格开朗乐观，积极上进。
        </p>
        </div>
    <div class="word">
        <p>
           易和人相处，拥有良好的亲和力。<br>
        </p>
    </div>
    <div class="word">
        <p>
            喜欢js，非常热爱编程，喜欢钻研新的技术，</br>具有很强的自学能力和良好的学习方法，喜欢研究各种新的框架。
        </p>
    </div>
    <div class="word">
        <p>
            希望求职一份WEB前端工程师，薪资期望8K。
        </p>
    </div>
        <div class="top"></div>
        <div class="foot"></div>
    </div>
</div>
</body>
</html>
<script src="lib/jquery.min.js"></script>
<script src="lib/jquery.fullPage.min.js"></script>
<script src="lib/jquery.easing.1.3.js"></script>
<script src="lib/jquery.isotope.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/handler.js"></script>
<script src="js/resumeEnter.js"></script>